<template>
	<view class="business-card" :class="showUp?'':'business-card-active'" :style="{width: width,height:height}"
		@tap="change">
		<view class="front" :style="{backgroundColor: frontBg}">
			<slot></slot>
			<h2>Da Da Deng</h2>
			<span>Web Designer</span>
			<ul class="contact-info">
				<li>
					<i class="iconfont icon-dianhua"></i>+028-86119898
				</li>
				<li>
					<i class="iconfont icon-shoucangclick"></i>10000
				</li>
				<li>
					<i class="iconfont icon-outperson"></i>deng1234
				</li>
			</ul>
		</view>
		<view class="back" :style="{backgroundColor: backBg}">
			<slot name="back"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'yr-flipCard',
		props: {
			frontBg: {
				type: String,
				default: 'rgba(255, 255, 255, .7)'
			},
			backBg: {
				type: String,
				default: 'rgba(0, 0, 0, .7)'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '400rpx'
			}
		},

		data() {
			return {
				showUp: true
			}
		},
		onLoad() {

		},
		methods: {
			change() {
				this.showUp = !this.showUp;
			}
		}
	}
</script>

<style lang='scss' scoped>
	.business-card {
		position: relative;
	}

	.front,
	.back {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: absolute;
		backface-visibility: hidden;
		transition: transform 0.5s linear;
	}

	.front {
		padding: 20px;
		transform: perspective(600px) rotateX(180deg);
	}

	.front::before,
	.front::after {
		content: '';
		position: absolute;
		right: 0;
	}

	.front h2 {
		text-transform: uppercase;
		font-weight: bold;
	}

	.front span {
		background: #34495e;
		color: #fff;
		padding: 4px 10px;
		display: inline-block;
		margin-bottom: 20px;
		font-size: 14px;
	}

	.front::before {
		background: #2c3e50;
		width: 60px;
		height: 80px;
		bottom: 0;
		clip-path: polygon(0 100%, 40% 0, 100% 100%, 80% 100%);
	}

	.front::after {
		background: #34495e;
		width: 70px;
		height: 70px;
		top: 0;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%);
	}

	.front .contact-info li {
		margin: 8px 0;
		display: flex;
		align-items: center;
	}

	.front .contact-info li i {
		width: 26px;
		height: 26px;
		background: #34495e;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 6px;
	}

	.back {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		text-transform: uppercase;
		letter-spacing: 8px;
		font-size: 24px;
		transform: perspective(600px) rotateX(0deg);
	}

	.business-card-active .front {
		transform: perspective(600px) rotateX(0deg);
	}

	.business-card-active .back {
		transform: perspective(600px) rotateX(-180deg);
	}
</style>
